<!--
 * @Description: 
 * @Date: 2022-02-16 10:19:22
 * @LastEditTime: 2022-04-14 16:59:04
 * @FilePath: /vue3-element-plus/src/views/components/autocomplete/index.vue
 * @Author: Devin
-->
<template>
  <div class="components">
    <div class="left">
      <el-card id="普通的输入框自动补全">
        <template #header>
          <div class="el-card-header">普通的输入框自动补全</div>
          <div class="el-card-header-tip">
            内部实现了<code>fetch-suggestions</code>不在需要关注设置下拉框的过程，只需传递一个下拉数组进去。
          </div>
        </template>
        <CcAutocomplete
          v-model="state1"
          :autocompleteList="list"
          class="inline-input"
          placeholder="Please Input"
          @select="handleSelect"
        />
        <Code><div v-html="code.code"></div></Code>
      </el-card>
      <el-card id="特殊类型的输入框自动补全"> 
        <template #header>
          <div class="el-card-header">特殊类型的输入框自动补全</div>
          <div class="el-card-header-tip">
            设置<code>autocompleteType="email"</code>即可实现邮箱提示，可修改默认的邮箱后缀，设置<code>emailAutocompleteList=[{value:'@qq.com'},...]</code>即可
          </div>
        </template>
        <CcAutocomplete
          v-model="state"
          autocompleteType="email"
          class="inline-input"
          placeholder="Please Input"
          @select="handleSelect"
        />
        <Code><div v-html="code.code1"></div></Code>
      </el-card>
      <el-card id="远程请求自动补全列表模式">
        <template #header>
          <div class="el-card-header">远程请求自动补全列表模式</div>
          <div class="el-card-header-tip">
            设置<code>autocompleteType="email"</code>即可实现邮箱提示，可修改默认的邮箱后缀，设置<code>emailAutocompleteList=[{value:'@qq.com'},...]</code>即可
          </div>
        </template>
        <CcAutocomplete
          v-model="state"
          listType="remote"
          field="name"
          class="inline-input"
          placeholder="Please Input"
          @select="handleSelect"
          value-key="name"
          :dataHandler="dataHandler"
        />
        <Code><div v-html="code.code2"></div></Code>
      </el-card>
    </div>
    <div class="right"><CcAnchor :sections="sections" :offset="120" width="150px"> </CcAnchor></div>
  </div>
</template>

<script lang="ts">
import { getInputAutoList } from '@/api/public';
import { defineComponent, onMounted, reactive, ref, toRefs } from '@vue/runtime-core';
import code from './code';
export default defineComponent({
  name: '',
  components: {},
  setup() {
    interface RestaurantItem {
      value: string;
      link: string;
    }
    const state = reactive({
      state1: '',
      state: '',
      code,
      list: [
        { value: 'vue', link: 'https://github.com/vuejs/vue' },
        { value: 'element', link: 'https://github.com/ElemeFE/element' },
        { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
        { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
        { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
        { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
        { value: 'babel', link: 'https://github.com/babel/babel' }
      ],
      sections: [
        { label: '普通的输入框自动补全' },
        { label: '特殊类型的输入框自动补全' },
        { label: '远程请求自动补全列表模式' },
      ]
    });

    const handleSelect = (item: RestaurantItem) => {};
    const dataHandler = (item: any) => {
      item.name = item.name + ' 名字经过了dataHandler处理';
      return item;
    };
    return { ...toRefs(state), handleSelect, dataHandler };
  }
});
</script>
<style scoped lang="scss"></style>
